<template>
  <div>
    <!-- 上面搜索框 然后 chart  然后列表 -->
    <el-row>
      <el-col :span="24">
        <el-form
          style="border-width: 2px;"
          :model="dataForm"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmit()"
          label-width="80px"
        >
          <el-form-item label="年份:">
            <el-tag
              v-model="dataForm.year"
              :disable-transitions="false"
              :key="item.id"
              v-for="item in years"
              size="small"
              :color="dataForm.year && item.id == dataForm.year ? 'blue' : '' "
              @click.native="changeYear(item)"
              style="margin-right: 10px;cursor: pointer;"
            >{{item.name}}</el-tag>
          </el-form-item>
          <!-- 性别 -->
          <el-form-item label="性别:">
            <el-tag
              v-model="dataForm.sex"
              :disable-transitions="false"
              :key="item.id"
              v-for="item in sexs"
              size="small"
              :color="dataForm.sex && item.id == dataForm.sex ? 'blue' : '' "
              @click.native="changeSex(item)"
              style="margin-right: 10px;cursor: pointer;"
            >{{item.name}}</el-tag>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- chart -->
    <el-row style="height:400px;">
      <el-col :span="12" style="height:100%;">
        <LineChart :xData="xData" :yData="yData" title="折线图"></LineChart>
      </el-col>
      <el-col :span="12" style="height:100%;">
        <BarChart :xData="xData" :yData="yData" title="折线图"></BarChart>
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-row>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="year" label="年份"></el-table-column>
        <el-table-column prop="sex" label="性别">
          <!-- <template slot-scope="scope">
			          <el-tag v-if="scope.row.sex == 1" size="small">男</el-tag>
			          <el-tag v-else size="small" type="danger">女</el-tag>
          </template>-->
        </el-table-column>
        <el-table-column :prop="item" :label="item" v-for="item in xData" :key="item"></el-table-column>
      </el-table>
    </el-row>
  </div>
</template>
<script>
import LineChart from "@/components/chart/LineChart";
import BarChart from "@/components/chart/BarChart";

export default {
  components: {
    LineChart,
    BarChart
  },
  data() {
    return {
      years: [{ id: "0", name: "全部" }],
      sexs: [
        { id: "0", name: "全部" },
        { id: "1", name: "男" },
        { id: "2", name: "女" }
      ],
      // chart
      xData: [],
      yData: [],
      tableData: [],
      dataForm: {
        year: "0",
        sex: "0"
      }
    };
  },
  mounted: function() {
    //默认获取所有的年份
    this.$http({
      url: this.$http.adornUrl("/test_data/years"),
      method: "get",
      params: this.$http.adornParams()
    }).then(({ data }) => {
      if (data && data.code === 0) {
        const ys = data.years;
        ys.forEach(y => {
          this.years.push({ id: t, name: t });
        });
      }
    });

    this.changeData();

    //
  },
  methods: {
    changeYear(year) {
      this.dataForm.year = year.id;
      //ajax 重新请求数据
      this.changeData();
    },
    changeSex(sex) {
      this.dataForm.sex = sex.id;

      this.changeData();
    },
    // 条件变了以后 切换数据
    changeData() {
      // table

      this.$http({
        url: this.$http.adornUrl("/test_data/test"),
        method: "get",
        params: this.$http.adornParams({
          year: this.dataForm.year,
          sex: this.dataForm.sex
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          //table
          this.tableData = data.list;
          //chart
          const chart = data.chart;
          // key 为X轴 value为Y
          let xs = [];
          let ys = [];
          for (let i in chart) {
            xs.push(i);
            ys.push(chart[i]);
          }

          this.xData = xs;
          this.yData = ys;
        }
      });
    }
  }
};
</script>
